<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body{
            /* 这个一定要加，不然拖动起来边界会有问题 */
            width: 100%;
            height: 100%;
            overflow: hidden;
            user-select: none;
            -webkit-user-select: none;
        }

        .crash {
            width: 100px;
            border-style: solid;
            border-width: 100px;
            /* border-top-color: rgb(25, 183, 106); */
            border-top-color: rgb(255, 255, 225);
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-width: 0;
            border-top-width: 200px;
            border-left-width: 50px;
            border-right-width: 50px;
            margin: 100px auto;
        }

        .content {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
            /* 这里的定位也不能加，因为取得是offsetTop，会计算与最近的带有定位的祖先元素的距离 */
            /* position: relative; */
        }

        .content>.item {
            flex-basis: 100px;
            height: 50px;
            width: 50px;
            background-color: aliceblue;
            color: black;
            text-align: center;
            line-height: 50px;
            transform: translate(0, 0);
        }
    </style>
</head>

<body>
    <!-- 移动端实现拖动效果 -->
    <div class="main">
        <div class="crash"></div>
        <div class="content">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <!-- JS -->
    <script>
        //禁用页面的一个拖拽效果
        document.addEventListener('touchmove', (e) => {
            if (e._isScroller) {
                return
            }
            e.preventDefault();
        }, {
            passive: false
        })
        // 禁用页面的长按
        window.addEventListener('contextmenu', function (e) {
            e.preventDefault()
        })
        // 获取元素的translateX，translateY 属性的值
        function getTranslateXY(element) {
            const style = window.getComputedStyle(element)
            const matrix = new DOMMatrixReadOnly(style.transform)
            return {
                translateX: matrix.m41,
                translateY: matrix.m42
            }
        }
        /**
         * 检查元素是否越界了
         * */
        function checkOver(moveX, moveY, target) {
            let bodyWidth = document.body.clientWidth || window.screen.width;
            let bodyHeight = document.body.clientHeight || window.screen.height;
            console.log('bodyWidth',bodyWidth,bodyHeight);

            let X = target.offsetLeft + moveX;
            let Y = target.offsetTop + moveY;
            let width = X + (target.offsetWidth || target.clientWidth);
            let height = Y + (target.offsetHeight || target.clientHeight);
            console.log('height',height,Y,moveY);
            // console.dir(target)

            if (X < 0) {
                moveX = - target.offsetLeft;
            } else if (width > bodyWidth) {
                moveX = bodyWidth - target.offsetLeft - target.offsetWidth;
            }

            if (Y < 0) {
                moveY = - target.offsetTop;
            } else if (height > bodyHeight) {
                moveY = bodyHeight - target.offsetTop - target.offsetHeight;
            }
            return {
                finX: moveX,
                finY: moveY
            }
        }

        // 监听点击事件
        const content = document.querySelector('.content');
        content.addEventListener('touchstart', (e) => {
            if (e.target == content) return;
            let target = e.target;
            target.innerHTML = "我被选中了";
            let startTop = e.pageY || e.touches[0].pageY;
            let startLeft = e.pageX || e.touches[0].pageX;
            // 获取一下已经有的偏移量，否则会出现闪动的情况
            let transAlready = getTranslateXY(target);
            startTop = startTop - transAlready.translateY;
            startLeft = startLeft - transAlready.translateX;
            console.log('souchStart', e);
            // 开始监听拖拽
            let func = (e) => {

                e.target.innerHTML = "我在移动";
                let newTop = e.pageY || e.touches[0].pageY;
                let newLeft = e.pageX || e.touches[0].pageX;
                // console.log('移动了', newLeft, newTop);
                // console.log('newTop',newTop,'startTop',startTop);
                // console.log('newLeft',newLeft,'startLeft',startLeft);
                let finY = newTop - startTop;
                let finX = newLeft - startLeft;
                // console.log('finally', finX, finY);
                // 检测元素是否越界
                let sty = checkOver(finX, finY, target);
                e.target.style = `transform: translate(${sty.finX}px,${sty.finY}px)`;
            }
            document.addEventListener('touchmove', func)
            // 结束监听
            let endFunc = (e) => {
                console.log('结束了');
                document.removeEventListener('touchmove', func);
                document.removeEventListener('touchend', endFunc);
                e.target.innerHTML = "结束了";
            };
            document.addEventListener('touchend', endFunc);
        })
    </script>
</body>

</html>